<div class="uk-grid uk-grid-match uk-grid-width-small-1-1 tm-grid-height-250" data-uk-grid-margin="" data-uk-grid-parallax="{translate:200}" style="margin-bottom: 200px;">
  <div class="uk-row-first">
    <div class="uk-panel uk-panel-box">
      <%= simple_form_for(Micopost.new, url: frontend_micoposts_url, method: :post, html: {class: 'uk-form'}) do |f| %>
        <div class="uk-form-row" style="margin-bottom: 10px">
          <%= f.text_area :content, placeholder: '发布新的twitter', class: 'uk-width-1-1 form-s-t', rows: '5', required: "true" %>
        </div>
        <!--        <hr>-->
        <%= f.button(:button, class: 'uk-button uk-button-primary uk-float-right', style: 'color:#fff') do %>
          <i class="uk-icon-send-o"></i> 发布
        <% end %>
      <% end %>
    </div>
  </div>
  <% @micoposts.each do |micopost| %>
    <div>
      <div class="uk-panel uk-panel-box ">
        <div style="margin-bottom: 30px">
          <%= image_tag 'avatar.jpg', class: 'uk-comment-avatar', style: 'width:40px; border-radius:50%;' %>
          <span class="uk-text-top">
            <%= micopost.user.name %><br>
            <span class="uk-text-small uk-text-muted  uk-text-bottom">
              <%= flatten_time micopost.created_at %>
            </span>
          </span>
          <div class="uk-button-dropdown uk-float-right" data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
            <button class="uk-button">···</button>
            <div class="uk-dropdown uk-dropdown-top" style="top: -218px; left: 0px;">
              <ul class="uk-nav uk-nav-dropdown">
                <li><a href="#">删除</a></li>
                <li><a href="#">隐藏此帖</a></li>
                <li><a href="#">关注此人</a></li>
                <li><a href="#">举报</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div style="margin-bottom: 20px">
          <%= micopost.content %>
        </div>

        <div>
          <div class="uk-float-right">
            <span class="uk-text-small uk-text-muted">
              <span id="likes_num_<%=micopost.id %>"><%=micopost.parises_num %></span> 人赞 &nbsp&nbsp <span id="comments_num_<%=micopost.id %>">0</span> 条评论 &nbsp&nbsp <span id="shares_num_<%=micopost.id %>">0</span> 次分享
            </span>
          </div>
          <hr>
          <div class="uk-float-right">

            <button id="like_<%=micopost.id%>" style="display: <%= micopost.can_parise(current_user) ? "" : "none" %> " class="uk-button" onclick="like(<%=micopost.id%>)">
              <i class="uk-icon-thumbs-o-up"></i> 赞
            </button>
            <button id="cancleLike_<%=micopost.id%>"  class="uk-button"  style="display: <%= micopost.can_parise(current_user) ? "none" : "" %> " onclick="cancelLike(<%=micopost.id%>)">
              <i class="uk-icon-thumbs-up"></i> 赞
            </button>

            <button class="uk-button ">
              <i class="uk-icon-comment-o"></i> 评论
            </button>

            <button class="uk-button ">
              <i class="uk-icon-share-alt"></i> 分享
            </button>
          </div>
        </div>
      </div>
    </div>
  <% end %>


</div>
<script>
  function like(pid){
    $("#like_"+pid).hide();
    $("#cancleLike_"+pid).show();
    $.ajax({
        url:"<%=frontend_parise_url %>",
        dataType: "json",
        method: "post",
        data:{
            'parise[user_id]':<%=current_user.id %>,
            'parise[micopost_id]':pid
        },
        success:function (data) {
          $("#likes_num_"+pid).html(data.count)
        },
        error:function (data) {

        }
    });
  }
  function cancelLike(pid){
      $("#like_"+pid).show();
      $("#cancleLike_"+pid).hide();
      $.ajax({
          url:"<%=frontend_parise_url %>",
          dataType: "json",
          method: "delete",
          data:{
              'parise[user_id]':<%=current_user.id %>,
              'parise[micopost_id]':pid
          },
          success:function (data) {
              $("#likes_num_"+pid).html(data.count)
          },
          error:function (data) {

          }
      });


  }
  $(function () {

  })
</script>
